import React from 'react';
import { Row,Col ,Avatar,Popover } from 'antd';
import { Breadcrumb } from 'antd';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux'
import './index.less';
import Axios from '@/axios';
import Util from '@/utils/utils';

class Header extends React.Component{
    state = {}
    componentWillMount(){
        this.personInfoRequest();
        setInterval(()=>{
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000)

        //刷新 token相关
        let now = Math.round(new Date() / 1000);
        let tokBegin = localStorage.getItem("tokBegin");
            tokBegin = tokBegin?parseInt(tokBegin):null;
        let refreshToken = localStorage.getItem("refreshToken");
        let deviceId = localStorage.getItem("X-Client-Id");
        let _params = {
            deviceId,
            refreshToken ,
        }
        if (now>tokBegin+3600) {
            this.refreshTokenRequest(_params);
        }
        setInterval(()=>{
            this.refreshTokenRequest(_params);
        },3600000)
    }
    handleLogout = ()=>{
        let _cascadeMenu = {
            menuNameLv1:"",
            menuNameLv2:"",
            menuTitle:"首页"
        }
        localStorage.setItem("_cascadeMenu",JSON.stringify(_cascadeMenu));
        window.open(`/#/login`,'_self');
        window.location.reload();
    }

    /*查询个人资料请求*/
    personInfoRequest = ()=>{
        Axios.get({
            block:'/hr',
            url:'/account/detail',
            params:"",
        }).then((data)=>{
            //console.log(data)
            let personInfo = data.data;
            this.setState({
                personInfo,
            })
            localStorage.setItem("personInfo",JSON.stringify(personInfo));
        }).catch((error)=>{
            console.log(error);
        })
    }
    // 用户刷新token
    refreshTokenRequest = (params)=>{
        Axios.post({
            block:'/hr',
            url:'/account/refreshToken',
            params:params,
        }).then((data)=>{
            //console.log(data)
            localStorage.setItem("X-Api-Key", data.object);
            let tokBegin = Math.round(new Date() / 1000);
            localStorage.setItem("tokBegin",tokBegin);
        }).catch((error)=>{
            console.log(error);
        })
    }
    render (){
        const personInfo = this.state.personInfo||{};
        const content = (
            <ul className="basic-op">
                <li><NavLink to="/organMember/personInfo/personInfoDetails" replace>个人资料</NavLink></li>
                <li><a href="javascript:;">密码修改</a></li>
                <li><a className="logout" onClick={this.handleLogout}>退出登录</a></li>
            </ul>
        );
        const menuName = this.props.menuName||{};
       /* console.log("menuName")
        console.log(menuName)*/
        return(
            <div className="header">
                <Row className="top">
                    <Col span="8" className="left">
                        <span className="welcome-txt">欢迎使用LIMS管理系统！</span>
                    </Col>
                    <Col span="16" className='right'>
                        <div className="basic-info">
                            <Popover content={content} placement="bottom" trigger="hover">
                                <Avatar size="small" icon="user" src={personInfo.headPortrait?personInfo.headPortrait:"/assets/default_avatar.jpg"}></Avatar>
                                <span className="user-name">{personInfo.account}</span>
                            </Popover>
                        </div>
                    </Col>
                </Row>
                <Row className="bottom">
                    <Col span="12" className="left">
                        <Breadcrumb separator=">">
                            {/*<Breadcrumb.Item><a href="">{menuName?menuName:"首页"}</a></Breadcrumb.Item>*/}
                            {/*<Breadcrumb.Item>{menuName?menuName:"首页"}</Breadcrumb.Item>*/}
                            {menuName.menuNameLv1?<Breadcrumb.Item><a href="javascript:;" style={{textDecoration:"none"}}>{menuName.menuNameLv1}</a></Breadcrumb.Item>:""}
                            {menuName.menuNameLv2?<Breadcrumb.Item><a href="javascript:;" style={{textDecoration:"none"}}>{menuName.menuNameLv2}</a></Breadcrumb.Item>:""}
                            <Breadcrumb.Item>{menuName.menuTitle?menuName.menuTitle:"首页"}</Breadcrumb.Item>
                        </Breadcrumb>
                    </Col>
                    <Col span="12" className="right">
                        <span className="date">{this.state.sysTime}</span>
                    </Col>
                </Row>
            </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        menuName: state.menuName
    }
};
export default connect(mapStateToProps)(Header)